<template>
    <div class="wrap">
      <!-- 分类管理 -->
      <!-- 搜索 -->
      <el-row class="titFunction">
      <el-input class="inp" v-model="input" placeholder="请输入要查询的商品名称"></el-input>
      <span class="hint">请选择排序依据：</span>
      <el-button type="primary" icon="el-icon-d-caret" @click="sortFn('residue')" >按库存</el-button>
      <el-button type="primary" icon="el-icon-d-caret" @click="sortFn('salesVol')" >按销量</el-button>
      <el-button type="primary" icon="el-icon-d-caret" @click="sortFn('price')" >按价格</el-button>
      <el-button type="primary"  @click="Axios()" >获取数据</el-button>
      <span class="hint">请选择排序方式：</span>
      <el-button type="primary" icon="el-icon-top">升序</el-button>
      <el-button type="primary" icon="el-icon-bottom">降序</el-button>
      </el-row>
      <el-table
      :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      style="width: 100%"
      :default-sort = "{prop: 'date', order: 'descending'}"
      :cell-style="cellStyle"> 
      stripe
      >
      <el-table-column
        fixed
        prop="name"
        label="商品名"
        
      >
      </el-table-column>
      <el-table-column
        fixed
        
        prop="type"
        label="包装类型"
        >
      </el-table-column>
      <el-table-column
        prop="residue"
        label="目前库存"
        >
      </el-table-column>
      <el-table-column
        prop="price"
        
        label="目前单价"
      >
      <template slot-scope="scope">
        <span class="priceStyle">¥</span>{{scope.row.price}}
      </template>
      </el-table-column>
      <el-table-column
        
        prop="salesVol"
        label="目前销量"
        >
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small">
            下架
          </el-button>
          <el-button
            @click.native.prevent="priceChange(scope.$index, tableData)"
            type="text"
            size="small">
            修改单价
          </el-button>
        </template>
      </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="current_change"
          :current-page="currentPage4"
          :page-sizes="[5,9,13]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length">
        </el-pagination>
      </div>
     
    </div>
</template>

<script>
export default {
  name:'',
  data () {
    return {
      input:"",
      multipleSelection: [],
      pagesize:9,
      currentPage:1,
      currentPage4: 1,
      test:[1,2,3,45,],
      tableData: [{
          name: '泸宝原窖小酒',
          residue: '12',
          type:'经典版',
          price: '12.00',
          salesVol:"2000"
        }, {
          name: '泸宝原窖小酒',
          residue: '1532',
          type:'豪华版',
          price: '12.00',
          salesVol:"999"
        }, {
          name: '泸宝原窖小酒',
          residue: '422',
          type:'经典版',
          price: '68.00',
          salesVol:"666"
        }, {
          name: '泸宝原窖10升',
          residue: '32',
          type:'豪华版',
          price: '698.00',
          salesVol:"777"
        }, {
          name: '泸宝原窖10升',
          residue: '132',
          type:'经典版',
          price: '398.00',
          salesVol:"1200"
        }, {
          name: '泸宝原窖绿典',
          residue: '3132',
          type:'经典版',
          price: '188.00',
          salesVol:"10000"
        }, {
          name: '泸宝原窖小酒',
          residue: '55',
          type:'经典版',
          price: '68.00',
          salesVol:"150"
        },
         {
          name: '泸宝原窖10升',
          residue: '132',
          type:'经典版',
          price: '398.00',
          salesVol:"340"
        }, {
          name: '泸宝原窖绿典',
          residue: '3132',
          type:'豪华版',
          price: '188.00',
          salesVol:"2540"
        }, {
          name: '泸宝原窖小酒',
          residue: '982',
          type:'豪华版',
          price: '68.00',
          salesVol:"2540"
        },
         {
          name: '泸宝原窖10升',
          residue: '132',
          type:'普通版',
          price: '398.00',
          salesVol:"2310"
        }, {
          name: '泸宝原窖绿典',
          residue: '3132',
          type:'经典版',
          price: '188.00',
          salesVol:"2540"
        }, {
          name: '泸宝原窖小酒',
          residue: '982',
          type:'经典版',
          price: '68.00',
          salesVol:"2540"
        },
         {
          name: '泸宝原窖10升',
          residue: '132',
          type:'豪华版',
          price: '398.00',
          salesVol:"2310"
        }, {
          name: '泸宝原窖绿典',
          residue: '3132',
          type:'经典版',
          price: '188.00',
          salesVol:"2540"
        }, {
          name: '泸宝原窖小酒',
          residue: '982',
          type:'豪华版',
          price: '68.00',
          salesVol:"1800"
        }, {
          name: '泸宝原窖10升',
          residue: '132',
          type:'经典版',
          price: '398.00',
          salesVol:"2800"
        }, {
          name: '泸宝原窖绿典',
          residue: '3132',
          type:'豪华版',
          price: '188.00',
          salesVol:"1435"
        }, {
          name: '泸宝原窖小酒',
          residue: '982',
          type:'普通版',
          price: '68.00',
          salesVol:"8550"
        }, {
          name: '泸宝原窖10升',
          residue: '132',
          type:'经典版',
          price: '398.00',
          salesVol:"1100"
        }, {
          name: '泸宝原窖绿典',
          residue: '3132',
          type:'豪华版',
          price: '188.00',
          salesVol:"750"
        }, {
          name: '泸宝原窖小酒',
          residue: '982',
          type:'经典版',
          price: '68.00',
          salesVol:"2540"
        },
         {
          name: '泸宝原窖10升',
          residue: '132',
          type:'普通版',
          price: '398.00',
          salesVol:"120"
        }, {
          name: '泸宝原窖绿典',
          residue: '3132',
          type:'普通版',
          price: '188.00',
          salesVol:"350"
        }, {
          name: '泸宝原窖小酒',
          residue: '982',
          type:'经典版',
          price: '68.00',
          salesVol:"680"
        }, {
          name: '泸宝原窖10升',
          residue: '132',
          type:'经典版',
          price: '398.00',
          salesVol:"1100"
        }, {
          name: '泸宝原窖绿典',
          residue: '3132',
          type:'豪华版',
          price: '188.00',
          salesVol:"750"
        }, {
          name: '泸宝原窖小酒',
          residue: '982',
          type:'经典版',
          price: '68.00',
          salesVol:"2540"
        },
         {
          name: '泸宝原窖10升',
          residue: '132',
          type:'普通版',
          price: '398.00',
          salesVol:"120"
        }, {
          name: '泸宝原窖绿典',
          residue: '3132',
          type:'普通版',
          price: '188.00',
          salesVol:"350"
        }, {
          name: '泸宝原窖小酒',
          residue: '982',
          type:'经典版',
          price: '68.00',
          salesVol:"680"
        }
        ]
    }
  },

    components: {},
    methods: {
      cellStyle({ row, column, rowIndex, columnIndex }){
        // 状态列字体颜色
        if (row.residue < 100 && columnIndex === 2) {
          return 'color: red'
        }else if(row.residue < 500 && columnIndex === 2){
          return 'color: orange'
        } else if(row.salesVol >=1000 && row.salesVol < 2000  && columnIndex === 4){
          return 'color: orange'
        }else if(row.salesVol >=2000 && columnIndex === 4){
         
        }else if(row.salesVol <=200 && columnIndex === 4){
          return 'color: red'
        }else if(row.residue > 3100 && columnIndex === 2){
          return 'color: green'
        }
        else if(row.name.includes("泸宝") && columnIndex === 0){//第一列字体
          return 'font-weight: 600;'
        }
        else if(row.type.includes("豪华") && columnIndex === 1){//第二列型号
          return 'color:#804c1a'
        }else if(row.type.includes("经典") && columnIndex === 1){
          return 'color:#cc945c'
        }
       
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      current_change:function(currentPage){
        this.currentPage = currentPage; 
      },
      handleSizeChange(val) {
       this.pagesize = val
      },
      sortFn(_type){    //排序封装，传入字段名即可
        let arr = this.tableData
        var temp 
        for (var i = arr.length - 1; i > 0; i--) {
          for (var j = 0; j < i; j++) {
            if (parseInt(arr[j][_type]) > parseInt(arr[j + 1][_type])) {
              temp = arr[j][_type]
              arr[j][_type] = arr[j + 1][_type]
              arr[j + 1][_type] = temp
            }
          }
        }
        console.log(arr);
        
      },
      Axios(){//api/savePic
        let newData = JSON.stringify(this.test)
        this.$http.post('http://api_dev.wanxikeji.cn/api/admin/addModifyGood',newData,{
          
        })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
      }
    }
}
</script>

<style scoped>
.a{
  color: #daaa7b;
}
.priceStyle{
  /* font-weight: 600; */
  font-size: 16px;
  margin-right:2px;
}
.titFunction{
  margin-bottom: 20px;
  float: left;
}
.inp{
  width: 300px;
}
.hint{
  color: #804c1a;
  margin: 0 5px;
}
</style>